<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    body{
      background-image: url("./images/26.jpg");
      width: 100%;
    }
    .daohang{
float: left;
    }
    .sousuo{
      margin: 0;
      padding: 0;
      color: blue;
    }
    table{
      width: 250px;
      border-collapse: 25px;
      float: left;
      padding: 15px;
      background-image: url("./images/27.png");
      clear: both;
    
    }
    tr{
      width: 200px;
    }
    table::after{
      content: "";
      display: block;
      clear: both;
    }
  .one{
    float: right;
    box-sizing: border-box;
   }
   .two{
    float: right;
    
    
    box-sizing: border-box;
   }
   .three{
    float: right;
    
    
    box-sizing: border-box;
   }
   .four{
    float: right;
    
   }
   .foot{
     margin-top: 20px;
    /* display: inline-block; */
    float: left;
   }
   
   table tr:hover{
          background-color: cornflowerblue;
          cursor: pointer;
        }
        input{
          float: left;
          box-sizing: border-box;
          
        }
  </style>
</head>
<body>
  <div class="daohang">
          <div class="sousuo">天梯游戏统计</div>
          <div class="foot">
          <div style="float: left;">
            <input type="text" value="请输入关键词"><img width="20px" height="20px" src="./images/25.jpg" ><br>
            <table>
              <caption style="margin: 12px; color: rgb(106, 106, 116);">应用<br>
              __________________________</caption>
              <tr>
                <td><a href="https://dev.tianti.com/#key-indicators:342f0b58cc595bc22c29a9a24b64af7a">应用概况</a></td><td rowspan="4"></td>
              </tr>
              <tr>
                <td><a href="https://dev.tianti.com/#key-indicators:342f0b58cc595bc22c29a9a24b64af7a">趋势分析</a></td>
              </tr>
              <tr>
                <td><a href="https://dev.tianti.com/#channel-distribution:342f0b58cc595bc22c29a9a24b64af7a">渠道分析</a></td>
              </tr>
              <tr>
                  <td><a href="https://dev.tianti.com/#channel-distribution:342f0b58cc595bc22c29a9a24b64af7a">版本分析</a></td>
                </tr>
                <tr>
                  <td><a href="https://dev.tianti.com/#key-indicators:342f0b58cc595bc22c29a9a24b64af7a">玩家价值</a></td>
                </tr>
            </table>
            <table>
              <caption style="margin: 12px; color: rgb(106, 106, 116)">用户<br>
              __________________________</caption>
              <tr>
                <td><a href="https://dev.tianti.com/#key-indicators:342f0b58cc595bc22c29a9a24b64af7a">新增与活跃</a></td><td rowspan="4"></td>
              </tr>
              <tr>
                <td><a href="https://dev.tianti.com/#key-indicators:342f0b58cc595bc22c29a9a24b64af7a">用户留存</a></td>
              </tr>
              <tr>
                <td><a href="https://dev.tianti.com/#channel-distribution:342f0b58cc595bc22c29a9a24b64af7a">使用习惯</a></td>
              </tr>
              <tr>
                  <td><a href="https://dev.tianti.com/#channel-distribution:342f0b58cc595bc22c29a9a24b64af7a">地域分布</a></td>
                </tr>
                <tr>
                  <td><a href="https://dev.tianti.com/#key-indicators:342f0b58cc595bc22c29a9a24b64af7a">语言分布</a></td>
                </tr>
            </table>
            <table>
              <caption style="margin: 12px; color: rgb(106, 106, 116)">关卡与页面<br>
              __________________________</caption>
              <tr>
                <td><a href="https://dev.tianti.com/#key-indicators:342f0b58cc595bc22c29a9a24b64af7a">关卡概况</a></td><td rowspan="4"></td>
              </tr>
              <tr>
                <td><a href="https://dev.tianti.com/#key-indicators:342f0b58cc595bc22c29a9a24b64af7a">指标对比</a></td>
              </tr>
              <tr>
                <td><a href="https://dev.tianti.com/#channel-distribution:342f0b58cc595bc22c29a9a24b64af7a">留存流失</a></td>
              </tr>
              <tr>
                  <td><a href="https://dev.tianti.com/#channel-distribution:342f0b58cc595bc22c29a9a24b64af7a">页面分析</a></td>
                </tr>
                <tr>
                  <td><a href="https://dev.tianti.com/#key-indicators:342f0b58cc595bc22c29a9a24b64af7a">关卡事件</a></td>
                </tr>
            </table>
            <table>
              <caption style="margin: 12px; color: rgb(106, 106, 116)">收益<br>
              __________________________</caption>
              <tr>
                <td><a href="https://dev.tianti.com/#key-indicators:342f0b58cc595bc22c29a9a24b64af7a">收益概况</a></td><td rowspan="4"></td>
              </tr>
              <tr>
                <td><a href="https://dev.tianti.com/#key-indicators:342f0b58cc595bc22c29a9a24b64af7a">付费习惯</a></td>
              </tr>
              <tr>
                <td><a href="https://dev.tianti.com/#channel-distribution:342f0b58cc595bc22c29a9a24b64af7a">虚拟消费</a></td>
              </tr>
              <tr>
                  <td><a href="https://dev.tianti.com/#channel-distribution:342f0b58cc595bc22c29a9a24b64af7a">产出与消耗</a></td>
                </tr>
                <tr>
                  <td><a href="https://dev.tianti.com/#key-indicators:342f0b58cc595bc22c29a9a24b64af7a">玩家充值</a></td>
                </tr>
            </table>
          </div>
            <div class="one">
              <img src="./images/20.png" >
          </div>
            
            <div class="two"><img src="./images/21.png" ></div><div class="three"><img src="./images/22.png" ></div><div class="four"><img src="./images/23.png"></div>
     </div>
</body>
</html>